<template>
  <el-card class="result-card" :class="[`result-card--${type}`, { 'is-clickable': clickable }]" @click="handleClick">
    <div class="result-header">
      <div class="result-icon">
        <el-icon :size="iconSize" :color="iconColor">
          <component :is="icon" />
        </el-icon>
      </div>
      <div class="result-title">
        <h3>{{ title }}</h3>
        <p v-if="subtitle">{{ subtitle }}</p>
      </div>
      <div v-if="showBadge && badgeValue" class="result-badge">
        <el-badge :value="badgeValue" :type="badgeType" />
      </div>
    </div>

    <div class="result-content">
      <!-- 主要指标 -->
      <div v-if="mainValue !== undefined" class="main-metric">
        <div class="metric-value">
          <span class="value-number">{{ formatMainValue }}</span>
          <span v-if="unit" class="value-unit">{{ unit }}</span>
        </div>
        <div v-if="comparison" class="metric-comparison">
          <el-icon :color="comparisonColor">
            <ArrowUp v-if="comparison.trend === 'up'" />
            <ArrowDown v-if="comparison.trend === 'down'" />
            <Minus v-if="comparison.trend === 'equal'" />
          </el-icon>
          <span :style="{ color: comparisonColor }">{{ comparison.value }}</span>
          <span class="comparison-text">{{ comparison.text }}</span>
        </div>
      </div>

      <!-- 进度条 -->
      <div v-if="showProgress" class="progress-section">
        <div class="progress-info">
          <span class="progress-label">{{ progressLabel }}</span>
          <span class="progress-value">{{ progressValue }}%</span>
        </div>
        <el-progress
          :percentage="progressValue"
          :type="progressType"
          :status="progressStatus"
          :stroke-width="progressStrokeWidth"
          :show-text="false"
        />
      </div>

      <!-- 描述信息 -->
      <div v-if="description" class="result-description">
        <p>{{ description }}</p>
      </div>

      <!-- 标签列表 -->
      <div v-if="tags && tags.length > 0" class="result-tags">
        <el-tag
          v-for="tag in tags"
          :key="tag.label"
          :type="tag.type || 'info'"
          size="small"
        >
          {{ tag.label }}
        </el-tag>
      </div>

      <!-- 详细数据 -->
      <div v-if="details && details.length > 0" class="result-details">
        <div
          v-for="detail in details"
          :key="detail.label"
          class="detail-item"
        >
          <span class="detail-label">{{ detail.label }}：</span>
          <span class="detail-value" :style="{ color: detail.color }">
            {{ detail.value }}
          </span>
        </div>
      </div>

      <!-- 自定义内容 -->
      <div v-if="$slots.content" class="result-custom">
        <slot name="content"></slot>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div v-if="actions && actions.length > 0" class="result-actions">
      <el-button
        v-for="action in actions"
        :key="action.key"
        :type="action.type || 'text'"
        :size="action.size || 'small'"
        :loading="action.loading"
        :disabled="action.disabled"
        @click.stop="handleAction(action)"
      >
        <el-icon v-if="action.icon">
          <component :is="action.icon" />
        </el-icon>
        {{ action.label }}
      </el-button>
    </div>

    <!-- 底部插槽 -->
    <div v-if="$slots.footer" class="result-footer">
      <slot name="footer"></slot>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'
import { 
  ArrowUp, 
  ArrowDown, 
  Minus,
  TrendCharts,
  SuccessFilled,
  WarningFilled,
  CircleCloseFilled,
  InfoFilled
} from '@element-plus/icons-vue'

const props = defineProps({
  // 卡片类型
  type: {
    type: String,
    default: 'default', // default, success, warning, danger, info
    validator: (value) => ['default', 'success', 'warning', 'danger', 'info'].includes(value)
  },
  // 图标
  icon: {
    type: [String, Object],
    default: () => TrendCharts
  },
  // 图标大小
  iconSize: {
    type: [String, Number],
    default: 32
  },
  // 标题
  title: {
    type: String,
    required: true
  },
  // 副标题
  subtitle: {
    type: String,
    default: ''
  },
  // 主要数值
  mainValue: {
    type: [String, Number],
    default: undefined
  },
  // 数值单位
  unit: {
    type: String,
    default: ''
  },
  // 数值格式化器
  formatter: {
    type: Function,
    default: null
  },
  // 对比数据
  comparison: {
    type: Object,
    default: null // { trend: 'up|down|equal', value: '12%', text: '较上月' }
  },
  // 描述文本
  description: {
    type: String,
    default: ''
  },
  // 标签列表
  tags: {
    type: Array,
    default: () => [] // [{ label: '标签', type: 'success' }]
  },
  // 详细信息
  details: {
    type: Array,
    default: () => [] // [{ label: '标签', value: '值', color: '#409EFF' }]
  },
  // 操作按钮
  actions: {
    type: Array,
    default: () => [] // [{ key: 'edit', label: '编辑', type: 'primary' }]
  },
  // 是否显示进度条
  showProgress: {
    type: Boolean,
    default: false
  },
  // 进度条标签
  progressLabel: {
    type: String,
    default: '完成度'
  },
  // 进度值
  progressValue: {
    type: Number,
    default: 0
  },
  // 进度条类型
  progressType: {
    type: String,
    default: 'line' // line, circle, dashboard
  },
  // 进度条状态
  progressStatus: {
    type: String,
    default: undefined // success, exception, warning
  },
  // 进度条粗细
  progressStrokeWidth: {
    type: Number,
    default: 6
  },
  // 是否显示徽章
  showBadge: {
    type: Boolean,
    default: false
  },
  // 徽章值
  badgeValue: {
    type: [String, Number],
    default: ''
  },
  // 徽章类型
  badgeType: {
    type: String,
    default: 'primary'
  },
  // 是否可点击
  clickable: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click', 'action'])

// 计算属性
const iconColor = computed(() => {
  const colorMap = {
    default: '#909399',
    success: '#67C23A',
    warning: '#E6A23C',
    danger: '#F56C6C',
    info: '#409EFF'
  }
  return colorMap[props.type] || colorMap.default
})

const formatMainValue = computed(() => {
  if (props.mainValue === undefined) return ''
  
  if (props.formatter) {
    return props.formatter(props.mainValue)
  }
  
  // 数字格式化
  if (typeof props.mainValue === 'number') {
    if (props.mainValue >= 10000) {
      return (props.mainValue / 10000).toFixed(1) + '万'
    }
    if (props.mainValue >= 1000) {
      return (props.mainValue / 1000).toFixed(1) + 'k'
    }
    return props.mainValue.toLocaleString()
  }
  
  return props.mainValue
})

const comparisonColor = computed(() => {
  if (!props.comparison) return '#909399'
  
  const colorMap = {
    up: '#67C23A',
    down: '#F56C6C',
    equal: '#909399'
  }
  return colorMap[props.comparison.trend] || '#909399'
})

// 事件处理
const handleClick = () => {
  if (props.clickable) {
    emit('click')
  }
}

const handleAction = (action) => {
  emit('action', action.key, action)
}
</script>

<style scoped>
.result-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}

.result-card.is-clickable {
  cursor: pointer;
}

.result-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 卡片类型样式 */
.result-card--success {
  border-left: 4px solid #67C23A;
}

.result-card--warning {
  border-left: 4px solid #E6A23C;
}

.result-card--danger {
  border-left: 4px solid #F56C6C;
}

.result-card--info {
  border-left: 4px solid #409EFF;
}

/* 卡片头部 */
.result-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  position: relative;
}

.result-icon {
  margin-right: 1rem;
  flex-shrink: 0;
}

.result-title {
  flex: 1;
  min-width: 0;
}

.result-title h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-title p {
  margin: 0;
  font-size: 0.9rem;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-badge {
  position: absolute;
  top: 0;
  right: 0;
}

/* 卡片内容 */
.result-content {
  margin-bottom: 1rem;
}

/* 主要指标 */
.main-metric {
  margin-bottom: 1rem;
}

.metric-value {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.value-number {
  font-size: 2rem;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.value-unit {
  font-size: 1rem;
  color: #909399;
  margin-left: 0.25rem;
}

.metric-comparison {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.comparison-text {
  color: #909399;
}

/* 进度条 */
.progress-section {
  margin-bottom: 1rem;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.progress-label {
  font-size: 0.9rem;
  color: #606266;
}

.progress-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #303133;
}

/* 描述信息 */
.result-description {
  margin-bottom: 1rem;
}

.result-description p {
  margin: 0;
  font-size: 0.9rem;
  color: #606266;
  line-height: 1.5;
}

/* 标签 */
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* 详细信息 */
.result-details {
  margin-bottom: 1rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.detail-label {
  color: #909399;
}

.detail-value {
  font-weight: 500;
  color: #303133;
}

/* 自定义内容 */
.result-custom {
  margin-bottom: 1rem;
}

/* 操作按钮 */
.result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

/* 底部 */
.result-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .result-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .result-icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  
  .value-number {
    font-size: 1.5rem;
  }
  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .result-actions {
    flex-direction: column;
  }
}
</style>